<template>
  <div>
    <el-card>
      <div
        style="
          width: 100vw;
          height: 100vh;
          background: rgba(0, 0, 0, 0.5);
          position: fixed;
          z-index: 4;
          top: 0;
          left: 0;
        "
        v-if="dialogVisible"
      ></div>
      <el-table
        border
        style="width: 100%; margin: 15px 0; height: 80vh"
        :data="skuInfoList"
        show-overflow-tooltip
      >
        <el-table-column prop="id" label="序号" width="60" align="center" />
        <el-table-column prop="skuName" label="名称" align="center" />
        <el-table-column
          prop="skuDesc"
          label="描述"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column label="图片" align="center"
          ><template #="{ row, $index }">
            <img
              :src="row.skuDefaultImg"
              style="width: 100px; height: 100px; background-size: cover"
            /> </template
        ></el-table-column>
        <el-table-column prop="price" label="价格" width="60" align="center" />
        <el-table-column prop="weight" label="重量" width="60" align="center" />
        <el-table-column label="操作" align="center">
          <template #="{ row, $index }">
            <el-button
              icon="Check"
              size="small"
              type="primary"
              @click="showTips()"
            ></el-button>
            <el-button
              icon="Edit"
              size="small"
              type="warning"
              @click="showTips()"
            ></el-button>
            <el-button
              icon="InfoFilled"
              size="small"
              type="info"
              @click="showInfo(row.id)"
            ></el-button>
            <el-button
              icon="Delete"
              size="small"
              type="danger"
              @click="showTips()"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3, 5, 7]"
        :background="true"
        layout=" prev, pager, next, jumper,->, sizes,total"
        :total="totalPage"
        @current-change="getSkuInfoList"
        @size-change="getSkuInfoList"
      />
      <div class="skuInfo" :class="{ pack: dialogVisible ? true : false }">
        <div v-if="dialogVisible">
          <span style="font-weight: 300; font-size: 14px">商品详情</span>
          <el-button
            icon="Close"
            style="border: none; right: 10px; position: absolute"
            @click="dialogVisible = false"
          ></el-button>
          <div style="margin: 15px 0 0 0">
            <el-form>
              <el-form-item label="名称" label-width="70px">{{
                skuInfo.skuName
              }}</el-form-item>
              <el-form-item label="描述" label-width="70px">{{
                skuInfo.skuDesc
              }}</el-form-item>
              <el-form-item label="价格" label-width="70px">{{
                skuInfo.price
              }}</el-form-item>
              <el-form-item label="平台属性" label-width="70px"
                ><el-tag
                  v-for="tag in skuInfo.skuAttrValueList"
                  style="margin: 7px 7px 5px 0"
                  >{{ tag.valueName }}</el-tag
                ></el-form-item
              >
              <el-form-item label="销售属性" label-width="70px"
                ><el-tag
                  v-for="tag in skuInfo.skuSaleAttrValueList"
                  style="margin: 7px 7px 5px 0"
                  >{{ tag.saleAttrValueName }}</el-tag
                ></el-form-item
              >
              <el-form-item label="商品图片" label-width="70px"> </el-form-item>
            </el-form>
            <el-carousel :interval="4000" type="card" height="200px">
              <el-carousel-item
                v-for="item in skuInfo.skuImageList"
                :key="item"
                style="
                  display: flex;
                  justify-content: center;
                  background-color: #fff;
                  height: 100%;
                "
              >
                <img :src="item.imgUrl" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { reqGetSkuInfo, reqSkuInfoList } from "../../../api/product/sku";

const skuInfoList = ref([]);
const skuInfo = reactive({});
const totalPage = ref(100);
const currentPage = ref(1);
const pageSize = ref(5);
const dialogVisible = ref(false);
const getSkuInfoList = async () => {
  let result = await reqSkuInfoList(currentPage.value, pageSize.value);
  skuInfoList.value = result.data.records;
  totalPage.value = result.data.total;
};
onMounted(() => {
  getSkuInfoList();
});
const showTips = () => {};
const showInfo = async (id: number) => {
  dialogVisible.value = true;
  let result = await reqGetSkuInfo(id);
  Object.assign(skuInfo, result.data);
  console.log(skuInfo);
};
</script>

<style lang="scss" scoped>
.skuInfo {
  width: 0px;
  height: 100vh;
  background: rgb(255, 255, 255);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 4;
  transition: all 0.5s ease-in-out;
}
.skuInfo.pack {
  padding: 10px 17px;
  width: 50vw;
}
</style>
